<!DOCTYPE html>
<html class="x-admin-sm">
<head>
<meta charset="UTF-8">
<title>欢迎页面-X-admin2.2</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<link rel="stylesheet" href="./css/font.css">
<link rel="stylesheet" href="./css/xadmin.css">
<script src="./lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/xadmin.js"></script>
<!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>
<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a href="">首页</a> <a href="">演示</a>
			<a> <cite>导航元素</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			onclick="location.reload()" title="刷新"> <i
			class="layui-icon layui-icon-refresh" style="line-height: 30px"></i></a>
	</div>
	<div class="layui-fluid">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md12">
				<div class="layui-card">

					<div class="layui-card-body layui-table-body layui-table-main">

						<table id="usertab" class="layui-table layui-form"
							lay-filter="test">
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>

</body>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="update" title="修改"><i class="iconfont">;</i></button>
  </div>
	</script>
<script>
layui.use(['laydate','form'], function(){
    var laydate = layui.laydate;
    var  form = layui.form;

    // 监听全选
    form.on('checkbox(checkall)', function(data){

      if(data.elem.checked){
        $('tbody input').prop('checked',true);
      }else{
        $('tbody input').prop('checked',false);
      }
      form.render('checkbox');
    }); 
    
    //执行一个laydate实例
    laydate.render({
      elem: '#start' //指定元素
    });

    //执行一个laydate实例
    laydate.render({
      elem: '#end' //指定元素
    });


  });
</script>
<script type="text/javascript">
      layui.use(['table','form'], function(){
        var table = layui.table;
        var form = layui.form;
        
        //渲染表格
        table.render({
          elem: '#usertab'
          ,url: '/users/update' //数据接口      	  
          ,page: true //开启分页
          ,cols: [[ //表头
        	 
        	 ,{field: 'uid', title: '编号'}
              ,{field: 'loginName', title: '用户名'}
             ,{field: 'lastLoginTime', title: '最后登录时间'}
              ,{field: 'psdWrongTime', title: '登录错误次数'}
             ,{field: 'isLockout', title: '是否锁定'}
             ,{field: 'lockTime', title: '账号锁定时间'}
             ,{field: 'createTime', title: '创建时间'}           
             ,{field: 'password', title: '密码'}           
            ,{field: '', title: '操作',toolbar: '#toolbarDemo'}
          ]]
        });
      //监听工具条
        table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
          var data = obj.data; //获得当前行数据
         
          var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
          var tr = obj.tr; //获得当前行 tr 的DOM对象
         
          if(layEvent === 'detail'){ //查看
            //do somehing
          } else if(layEvent === 'update'){ //修改密码
            //do something
          layer.confirm('真的修改么', function(index){
            obj.update(); //删除对应行（tr）的DOM结构，并更新缓存
            layer.close(index);
            //向服务端发送修改指令
            $.post(           		
            	"/users/update?uid="+data.uid	
            );
          });
            //同步更新缓存对应的值
            obj.update({
              loginName: ''
              ,title: 'title'
            });
          }
        });
      }); 
    
    </script>
</html>